<template>
    <div id="age" class="echarts" :style="ageStyle"></div>
</template>
<script>
export default {
  name: "ageEhart",
  props: ["college", "year"],
  data() {
    return {
      url: {
        query: "/datacenter/teacher/analysis/x/age"
      },
      queryForm: {
        data: {
          //学院
          collegeCode: "",
          //年份
          year: new Date().getFullYear().toString() 
        }
      },
      ageStyle: {
        width: "742px",
        height: "396px"
      }
    };
  },
  watch: {
    college: function(val, oldVal) {
      this.queryForm.data.college = val;
    },
    year: function(val, oldVal) {
      this.queryForm.data.year = val;
    }
  },
  methods: {
    drawAgeEcharts: function() {
      let ageEcharts = this.$echarts.init(document.getElementById("age"));
      ageEcharts.showLoading();
      this.$http.get(this.url.query).then(
        (res) => {
          if (res.data.success) {
            // 解析数据
            let legendArray = new Array();
            let seriesArray = new Array();
            let echartsData = res.data.data;
            echartsData.forEach(element => {
              legendArray.push(element.name);
              let seriesObject = {
                value : element.value,
                name : element.name
              };
              seriesArray.push(seriesObject);
            });


            ageEcharts.setOption({
              tooltip: {
                trigger: "item",
                formatter: "{a} <br/>{b} : {c} ({d}%)",
                textStyle: {
                  align: "left"
                }
              },
              legend: {
                orient: "vertical",
                left: "left",
                data: legendArray
              },
              series: [
                {
                  name: "人数",
                  type: "pie",
                  radius: "55%",
                  center: ["50%", "60%"],
                  data: seriesArray,
                  itemStyle: {
                    emphasis: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: "rgba(0, 0, 0, 0.5)"
                    }
                  },
                  label: {
                    normal: {
                      formatter: " {b|{b}：}{c} ",
                      rich: {}
                    }
                  }
                }
              ]
            });
            ageEcharts.hideLoading();
          } else {
            this.$message({
              type: "error",
              message: res.data.info
            });
          }
        },
        (res) => {
          this.$message({
            showClose: true,
            message: "网络错误,code=" + res.status,
            type: "error"
          });
        }
      );
    }
  },
  mounted() {
    this.drawAgeEcharts();
  }
};
</script>
